<template>
  <Form :model="formItem" :label-width="80">
    <template v-for="item in formJson">
      <template v-if="item.type==='input'">
        <FormItem :key="item.key" :label="item.name">
          <Input v-model="item.data" :name="item.name"></Input>
        </FormItem>
      </template>
      <template v-else-if="item.type==='select'">
        <FormItem :key="item.key" :label="item.name">
          <Select v-model="item.data" style="width:200px;">
            <Option v-for="selectItem in item.enum" :value="selectItem.value" :key="selectItem.name">{{
                selectItem.name
              }}
            </Option>
          </Select>
        </FormItem>
      </template>
    </template>
    <Button type="primary" @click="testSubmit">提交</Button>
  </Form>
</template>

<script>
import formJson from "@/components/dynamicForm/form";

export default {
  name: "index.vue",
  data() {
    return {
      formJsonTitle: formJson.formItemJson.title,
      formJson: formJson.formItemJson.item,
      formItem: {
        input: '',
        select: '',
        radio: 'male',
        checkbox: [],
        switch: true,
        date: '',
        time: '',
        slider: [20, 50],
        textarea: ''
      }
    }
  },
  methods: {
    testSubmit: function () {
      console.log(this.formJson);
      let data = this.formJson;
      let requestJson = {};
      for (let index = 0, size = data.length; index < size; index++) {
        let innerJson = data[index];
        console.log(innerJson.key, '=', innerJson.data)
        // 放json对象
        requestJson[innerJson.key] = innerJson.data;
      }
      console.log(requestJson)
    }
  }
}
</script>

<style scoped>

</style>
